<template>
	<el-dialog width="1500px" title="编辑成员资料" :visible.sync="dialogVisible" :close-on-click-modal="false">
		<a-form class="form" :mode="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
			<a-card class="card" title="成员信息" :bordered="false">
				<a-row class="form-row">
					<a-col :xl="{span: 6}">
						<a-form-item label="联系人" prop="people">
							<a-input allowClear v-model="form.people" />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="联系电话" prop="contact_tel">
							<a-input allowClear v-model="form.contact_tel" />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="推广模式" prop="type">
							<el-select style="width: 240px;" clearable v-model="form.type" placeholder="请选择">
								<el-option v-for="item in typeList" :key="item.values" :label="item.label"
									:value="item.values">
								</el-option>
							</el-select>
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="推广类型" prop="user_type">
							<el-select style="width: 240px;" clearable v-model="form.user_type" placeholder="请选择">
								<el-option v-for="item in user_typeList" :key="item.values" :label="item.label"
									:value="item.values">
								</el-option>
							</el-select>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row class="form-row">
					<a-col :lg="6" :md="12" :sm="24">
						<a-form-item label="推广级别" prop="level">
							<el-select style="width: 240px;" clearable v-model="form.level" placeholder="请选择">
								<el-option v-for="item in options" :key="item.values" :label="item.label"
									:value="item.values">
								</el-option>
							</el-select>
						</a-form-item>
					</a-col>
					<a-col :lg="6" :md="12" :sm="24">
						<a-form-item label="推广城市" prop="shopcity">
							<a-input allowClear v-model="form.shopcity" />
						</a-form-item>
					</a-col>
					<a-col :lg="6" :md="12" :sm="24">
						<a-form-item label="邀请码" prop="code">
							<a-input allowClear v-model="form.code" />
						</a-form-item>
					</a-col>
					<a-col :lg="6" :md="12" :sm="24">
						<a-form-item label="分成率" prop="rate">
							<a-input allowClear v-model="form.rate" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row class="form-row">
					<a-col :lg="6" :md="12" :sm="24">
						<a-form-item label="结算类型" prop="rate_type">
							<el-select style="width: 240px;" clearable v-model="form.rate_type" placeholder="请选择">
								<el-option v-for="item in rateType" :key="item.values" :label="item.label"
									:value="item.values">
								</el-option>
							</el-select>
						</a-form-item>
					</a-col>
					<a-col :lg="6" :md="12" :sm="24">
						<a-form-item label="结算固定金额" prop="rate_money">
							<a-input allowClear v-model="form.rate_money" />
						</a-form-item>
					</a-col>
				</a-row>
			</a-card>
			<a-card class="card" title="公司信息" :bordered="false">
				<a-row class="form-row">
					<a-col :xl="{span: 6}">
						<a-form-item label="公司/机构名称" prop="mechanism">
							<a-input allowClear v-model="form.mechanism" />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="公司/机构地址" prop="address">
							<!-- <a-input allowClear v-model="form.address" /> -->
							<el-cascader style="width: 250px;" v-model="form.address" clearable
								filterable placeholder="请选择公司/机构地址" :options="areaList" :props="optionProps"
								separator="-" />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="法人姓名" prop="faname">
							<a-input allowClear v-model="form.faname" />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="法人身份证号" prop="idcard">
							<a-input allowClear v-model="form.idcard" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row class="form-row">
					<a-col :xl="{span: 6}">
						<a-form-item label="统一社会信用代码" prop="companyid">
							<a-input allowClear v-model="form.companyid" />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="法人身份证正面照" prop="faidcard">
							<crop-upload show-type="photo" :init-val="form.faidcard" wrapper-width="95px"
								wrapper-height="95px" @setVal="(val) => setUrl('faidcard', val)" />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="法人身份证背面照" prop="faidcard_back">
							<crop-upload show-type="photo" :init-val="form.faidcard_back" wrapper-width="95px"
								wrapper-height="95px" @setVal="(val) => setUrl('faidcard_back', val)" />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="营业执照照片" prop="shopcard">
							<crop-upload show-type="photo" :init-val="form.shopcard" wrapper-width="95px"
								wrapper-height="95px" @setVal="(val) => setUrl('shopcard', val)" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row class="form-row">
					<a-col :xl="{span: 6}">
						<a-form-item label="推广区域" prop="area_id">
							<!-- <a-input v-model="form.area_id" /> -->
							<el-cascader style="width: 250px;" v-model="form.area_id" clearable
								filterable placeholder="请选择推广区域" :options="areaList" :props="optionProps"
								separator="-" />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="支付宝账号" prop="alipayaccount">
							<a-input allowClear v-model="form.alipayaccount" />
						</a-form-item>
					</a-col>
					<a-col :xl="{span: 6}">
						<a-form-item label="邮箱地址" prop="email">
							<a-input allowClear v-model="form.email" />
						</a-form-item>
					</a-col>
				</a-row>

			</a-card>
		</a-form>
		<a-row style="text-align: right;">
			<a-col>
				<a-button style="margin-right: 20px;" @click="dialogVisible = false">取 消</a-button>
				<a-button type="primary" @click="submit">确 定</a-button>
			</a-col>
		</a-row>
	</el-dialog>
</template>

<script>
	import {
		saleApplyDetail,
		saleUserEdit
	} from '@/api/extension'
	import {
		getRegion
	} from '@/api/order'
	import cropUpload from '@/components/common/cropUpload'
	// import previewImg from '@/components/common/previewImg'
	export default {
		// name: 'centerDialog',
		components: {
			cropUpload
		},
		props: {
			saleUserIdEidt: {
				type: Number,
				default: 0
			},
			editList:{
				type:Object,
				default:()=>({})
			}
		},
		data() {
			return {
				form: {
					people: '',
					contact_tel: '',
					type: '',
					user_type: '',
					level: '',
					shopcity: '',
					code: '',
					rate: '',
					rate_type: '',
					rate_money: '',
					mechanism: '',
					address: '',
					faname: '',
					idcard: '',
					companyid: '',
					faidcard: '',
					faidcard_back: '',
					shopcard: '',
					alipayaccount: '',
					email: '',
					sale_user_id: '',
					area_id: ''
				},
				tableData: {},
				dialogVisible: false,
				dialogVisibleImg: false,
				areaList: [],
				companyArea: '',
				optionProps: {
					value: 'name',
					label: 'name',
					expandTrigger: 'hover',
					children: 'sub'
				},
				regionList: [],
				dialogImageUrl: '',
				options: [{
					label: '一级推广员',
					values: '1'
				}, {
					label: '二级推广员',
					values: '2'
				}],
				typeList: [{
					label: '线上',
					values: '1'
				}, {
					label: '线下',
					values: '2'
				}],
				user_typeList: [{
					label: '企业',
					values: '1'
				}, {
					label: '个人',
					values: '2'
				}],
				rateType: [{
					label: '租金比例结算',
					values: '1'
				}, {
					label: '官网价比例结算',
					values: '2'
				}, {
					label: '固定金额结算',
					values: '3'
				}, {
					label: '租金比例+固定金额结算',
					values: '4'
				}, {
					label: '官网价+固定金额例结算',
					values: '5'
				}]
			}
		},
		watch: {
			dialogVisible(val) {
				if (val) {
					console.log(this.editList);
					this.getData()
					this.init()
				}
			}
		},
		mounted() {
			this.getProvice()
		},
		methods: {
			getAreaId(arr) {
				for (const p of this.areaList) {
					if (p.name === arr[0]) {
						for (const c of p.sub) {
							if (c.name === arr[1]) {
								return c.id
							}
						}
					}
				}
				return ''
			},
			getProvice() {
				getRegion().then(res => {
					console.log("111", res);
					this.regionList = res ? res[0].sub : []
					this.areaList = res ? [...res[0].sub] : []
					const index = this.areaList.findIndex(k => k.id === 7459)
					this.areaList.splice(index, 1)
				})
			},
			getData() {
				saleApplyDetail(this.saleUserId).then(res => {
					this.tableData = res
				})
			},
			init() {
				for (const key in this.form) {
					this.form[key] = this.editList[key] || ''
				}
			},
			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			handlePictureCardPreview(file) {
				console.log(file.url);
				this.dialogImageUrl = file.url;
				this.dialogVisibleImg = true;
			},
			setUrl(key, value) {
				this.form[key] = value
			},
			submit() {
				console.log(this.form);
				this.form.sale_user_id = this.saleUserIdEidt
				const params = this.form

				console.log(params);
				saleUserEdit(params).then(res => {
					console.log(res);
					this.dialogVisible=false
					this.$message({
						type:'success',
						message:'编辑成功'
					})
				})
			}
		}
	}
</script>

<style lang="less" scoped>
</style>
